<template>
  <div class="navBar">
    <span
      :class="{
        active: top.name == item.name
      }"
      class="nav"
      v-for="(item, index) in hotTagList"
      :key="index"
      @click="selectType(item, index)"
    >
      {{ item.name }}
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      typeName: ''
    }
  },
  props: {
    hotTagList: {
      type: Array,
      default() {
        return []
      }
    },
    top: {
      type: Object
    }
  },
  methods: {
    selectType(item, index) {
      // console.log(item, this.top)
      // console.log(this.top.name === item.name)
      if (this.top.name === item.name) {
        return
      }
      // console.log('不同')
      this.$emit('updataHotTagTop', item, index)
      // console.log(item)
    }
  },
  created() {
    // console.log(this.top, this.hotTagList)
  },
  watch: {
    top() {
      // console.log(this.top.name)
    }
  }
}
</script>
<style lang="scss" scoped>
.navBar {
  display: flex;
}
.nav {
  color: #999;
  padding: 3px 8px;
  margin: 0 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.5s;
  &:hover {
    background-color: #fcebeb;
    color: #eb4f4f;
    transform: translateY(-4px);
    box-shadow: 4px 4px 4px rgba(225, 134, 134, 0.3);
  }
}
.active {
  background-color: #fcebeb;
  color: #eb4f4f;
}
</style>
